<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: #888888 1px solid;
            margin: 0 auto;
            line-height: 500px;
            text-align: center;
            font-size: 50px;
            font-weight: bolder;
            background-color: green;
            opacity: 0.2;
        }

        @media print {
            .box {
                font-size: 100px;
                background-color: red;
                -webkit-print-color-adjust: exact; /* 强制打印背景色 */
            }
        }

    </style>
</head>
<body>


<!--
    媒体查询:
        1.媒体类型:
            all : 检测所有设备
            print : 检测打印设备
            screen : 检测显示设备
        语法:
            @media 媒体类型{
                选择器 {
                    属性名称:属性值;
                }

            }
-->
    <div class="box">
        过年好！
    </div>
</body>
</html>